<!-- Created by jack on 2022/4/2 - 13:34 -->
<style scoped lang="less">
.banner{
  width: 100%;
  height: 132px;
  transform-style: preserve-3d;
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.node{
  width: 400px;
  height: 132px;
  transition: all ease-in-out 500ms;
  transform-style: preserve-3d;
  position: absolute;
  opacity: 0;
  transform:  scale(0);
  &__image{
    border-radius: 10px;
    width: 100%;
    object-fit: contain;
  }
}
.l2{
  opacity: 1;
  transform: translate(-160px, 0px) scale(0.8);
}
.l1{
  opacity: 1;
  transform: translate(-90px, 0px) scale(0.9);
  z-index: 10;
}
.main{
  opacity: 1;
  transform: translate(0px, 0px) scale(1);
  z-index: 100;
}
.r1{
  opacity: 1;
  transform: translate(90px, 0px) scale(0.9);
  z-index: 10;
}
.r2{
  opacity: 1;
  transform: translate(160px, 0px) scale(0.8);
}
</style>

<template>
  <div class="banner">
    <div v-for="item of listCom" :style="{'background-color':item.color}" :class="getClass(item)" class="node" @click="changeClass(item)">
      <img :src="item.imageUrl" class="node__image">
    </div>
  </div>
</template>
<script setup lang="ts">
import Swiper, {node} from "./swiper"
import {computed, onMounted, ref, watch} from "vue";
import {clearTimer, setTimer} from "@/helper";
import { AxiosService } from "@/core";
const axios = new AxiosService('netEasyMusic')
// 列表
const list = ref([])
const classMap = ['main','r1','r2','l2','l1']
// list计算列表
const listCom = computed(() => (list.value?.map( (ele:any,index:number) => ({
  index,
  ...ele,
  className:classMap[index]
}))))
axios.get({
  api:'/banner',
  success: ({banners}) => list.value = banners ?? []
})


let swiper: any
let root:node
let timer:number
const timerFn = () => {
  if(timer) clearTimer(timer)
  timer = setTimer(() => {
    swiper.selectMain(root.value.next,root)
  },6000,true)
}
//  监听执行
watch(listCom,value => {
  swiper = new Swiper(value,'index')
  root = ref(swiper.getRoot())
  timerFn()
})

// 交互
// 获取class
const getClass = (item:node) => swiper.getClass(item,root.value)
// 改变样式
const changeClass = (item:node) => {
  timerFn()
  const { index:itemIndex } = item
  const { index:rootIndex } = root.value
  if(itemIndex === rootIndex) {
    console.log(item)
  }else swiper.selectMain(item,root)
}


</script>
